<template>
  <div
    class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex flex-col items-center justify-center p-4 sm:p-6 lg:p-8">
    <!-- 表单卡片 -->
    <el-card class="box-card">
      <!-- 卡片头部 -->
      <div class="bg-blue-600 p-6 text-center">
        <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white">鹿鸣大健康</h1>
        <p class="text-blue-100 mt-1">请填写以下信息并提交</p>
      </div>

      <!-- 表单内容 -->
      <div class="p-6">
        <el-form ref="form" :model="form" label-width="80px">
          <!-- 姓名输入框 -->
          <el-form-item label="姓名">
            <el-input
              v-model="form.name"
              @blur="validateField('name')"
              placeholder="请输入您的姓名"
              :class="{'is-error': errors.name}"
            />
            <div v-if="errors.name" class="el-form-item__error">{{ errors.name }}</div>
          </el-form-item>

          <!-- 手机号输入框 -->
          <el-form-item label="手机号">
            <el-input
              v-model="form.phone"
              @blur="validateField('phone')"
              type="tel"
              maxlength="11"
              placeholder="请输入您的手机号"
              :class="{'is-error': errors.phone}"
            />
            <div v-if="errors.phone" class="el-form-item__error">{{ errors.phone }}</div>
          </el-form-item>

          <!-- 性别单选框 -->
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex" @change="validateField('sex')">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
            <div v-if="errors.sex" class="el-form-item__error">{{ errors.sex }}</div>
          </el-form-item>

          <!-- 生日时间框 -->
          <el-form-item label="生日">
            <el-date-picker
              v-model="form.birthDate"
              @change="validateField('birthDate')"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择您的生日"
              style="width: 100%"
            />
            <div v-if="errors.birthDate" class="el-form-item__error">{{ errors.birthDate }}</div>
          </el-form-item>

          <!-- 身高输入框 -->
          <el-form-item label="身高(cm)">
            <el-input
              v-model.number="form.height"
              @blur="validateField('height')"
              type="number"
              placeholder="请输入您的身高(单位:cm)"
              :class="{'is-error': errors.height}"
            />
            <div v-if="errors.height" class="el-form-item__error">{{ errors.height }}</div>
          </el-form-item>

          <!-- 体重输入框 -->
          <el-form-item label="体重(kg)">
            <el-input
              v-model.number="form.weight"
              @blur="validateField('weight')"
              type="number"
              step="0.1"
              placeholder="请输入您的体重(单位:kg)"
              :class="{'is-error': errors.weight}"
            />
            <div v-if="errors.weight" class="el-form-item__error">{{ errors.weight }}</div>
          </el-form-item>

          <!-- 提交和重置按钮 -->
          <el-form-item>
            <el-button
              type="primary"
              @click="handleSubmit"
              :loading="isSubmitting"
              style="margin-right: 10px"
            >
              {{ isSubmitting ? '提交中...' : '提交' }}
            </el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 成功弹窗 -->
    <el-dialog :visible.sync="showSuccessModal" width="380px" :show-close="false" center>
      <div class="text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="el-icon-success text-green-600" style="font-size: 2rem"></i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">提交成功</h3>
        <p class="text-gray-500 mb-6">您的信息已成功提交,请移步到检查设备进行检查！</p>
        <el-button type="primary" @click="resetForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createZkxcUser} from '@/api/customer/zkxcUser';
export default {

  name: 'FormPage',
  data() {
    return {
      // 表单数据
      form: {
        name: '',
        phone: '',
        sex: '',
        birthDate: '',
        height: null,
        weight: null
      },
      // 错误信息
      errors: {
        name: '',
        phone: '',
        sex: '',
        birthDate: '',
        height: '',
        weight: ''
      },
      // 提交状态
      isSubmitting: false,
      // 成功弹窗显示状态
      showSuccessModal: false
    }
  },
  methods: {
    /**
     * 验证单个字段
     * @param {string} field - 字段名称
     */
    validateField(field) {
      switch (field) {
        case 'name':
          if (!this.form.name.trim()) {
            this.errors.name = '请输入您的姓名'
          } else if (this.form.name.length > 20) {
            this.errors.name = '姓名长度不能超过20个字符'
          } else {
            this.errors.name = ''
          }
          break
        case 'phone':
          const phoneReg = /^1[3-9]\d{9}$/
          if (!this.form.phone) {
            this.errors.phone = '请输入您的手机号'
          } else if (!phoneReg.test(this.form.phone)) {
            this.errors.phone = '请输入有效的手机号'
          } else {
            this.errors.phone = ''
          }
          break
        case 'sex':
          if (!this.form.sex) {
            this.errors.sex = '请选择您的性别'
          } else {
            this.errors.sex = ''
          }
          break
        case 'birthDate':
          if (!this.form.birthDate) {
            this.errors.birthDate = '请选择您的生日'
          } else {
            // 检查生日是否为未来日期
            const birthDate = new Date(this.form.birthDate)
            const today = new Date()
            if (birthDate > today) {
              this.errors.birthDate = '生日不能是未来日期'
            } else {
              this.errors.birthDate = ''
            }
          }
          break
        case 'height':
          if (this.form.height === null || this.form.height === '') {
            this.errors.height = '请输入您的身高'
          } else if (this.form.height <= 0) {
            this.errors.height = '身高必须大于0'
          } else if (this.form.height > 300) {
            this.errors.height = '身高不能超过3米'
          } else {
            this.errors.height = ''
          }
          break
        case 'weight':
          if (this.form.weight === null || this.form.weight === '') {
            this.errors.weight = '请输入您的体重'
          } else if (this.form.weight <= 0) {
            this.errors.weight = '体重必须大于0'
          } else if (this.form.weight > 1000) {
            this.errors.weight = '体重不能超过1000公斤'
          } else {
            this.errors.weight = ''
          }
          break
        default:
          break
      }
    },

    /**
     * 验证所有字段
     * @returns {boolean} - 是否通过验证
     */
    validateForm() {
      let isValid = true

      // 验证所有字段
      Object.keys(this.form).forEach(field => {
        this.validateField(field)
        if (this.errors[field]) {
          isValid = false
        }
      })

      // 如果有错误，滚动到第一个错误字段
      if (!isValid) {
        this.$nextTick(() => {
          // Element UI表单中没有需要聚焦的原生元素，所以移除了原生DOM操作
        })
      }

      return isValid
    },

    /**
     * 处理表单提交
     */
    async handleSubmit() {
      // 验证表单
      if (!this.validateForm()) {
        return
      }

      // 设置提交状态
      this.isSubmitting = true

      try {
        // 模拟提交到后台
        console.log('提交的表单数据:', this.form)
        createZkxcUser(this.form).then(res => {
          this.showSuccessModal = true;
        }).catch(err => {
          console.log(err)
        })

      } catch (error) {
        console.error('提交失败:', error)
        this.$message.error('提交失败，请稍后重试')
      } finally {
        // 重置提交状态
        this.isSubmitting = false
      }
    },

    /**
     * 重置表单
     */
    resetForm() {
      this.form = {
        name: '',
        phone: '',
        sex: '',
        birthDate: '',
        height: null,
        weight: null
      }
      this.errors = {
        name: '',
        phone: '',
        sex: '',
        birthDate: '',
        height: '',
        weight: ''
      }
      this.showSuccessModal = false
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 80%;
  margin: 30% auto;
}
</style>
